NW.js 入门

NW.js 入门

NW.js 可以做什么？

NW.js 基于 Chromium 和 Node.js。它允许您直接从浏览器调用 Node.js 代码和模块，并在您的应用程序中使用 Web 技术。此外，您可以轻松地将 Web 应用程序打包成原生应用程序。

获取 NW.js

您可以从官方网站 https://nw.js.cn 获取最新的二进制文件。您也可以按照构建 NW.js 中的说明自行构建 NW.js 二进制文件。

提示

建议您选择 SDK 构建版本来开发您的应用程序，这将使您能够使用 DevTools 调试您的应用程序。有关构建版本之间差异的详细信息，请参阅构建版本。

编写 NW.js 应用

示例 1 - Hello World

这是一个基本的示例，展示了如何编写 NW.js 应用程序。

步骤 1. 创建 package.json

{
  "name": "helloworld",
  "main": "index.html"
}

package.json 是应用程序的清单文件。它使用 JSON 格式编写。main 字段确定 NW.js 打开的第一个页面，在本例中为 HTML 文件 "index.html"。name 字段是 NW.js 应用程序中使用的唯一名称。有关更多详细信息，请参阅清单格式。

使用 JS 文件作为主文件

您也可以在 "main" 字段中设置 JS 文件，例如 "main.js"。然后，JS 文件将在启动时加载到后台页面，并且默认情况下不会打开任何窗口。通常，您可以在稍后进行一些初始化并手动打开窗口。例如，

// initialize your app
// and ...
nw.Window.open('index.html', {}, function(win) {});

步骤 2. 创建 index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

这是一个普通的 HTML 文件。您可以使用最新浏览器支持的任何 Web 技术。

步骤 3. 运行您的应用程序

cd /path/to/your/app
/path/to/nw .

/path/to/nw 是 NW.js 的二进制文件。在 Windows 上，它是 nw.exe；在 Linux 上，它是 nw；在 Mac 上，它是 nwjs.app/Contents/MacOS/nwjs。

在 Windows 上拖放

在 Windows 上，您可以将 包含 package.json 的文件夹 拖放到 nw.exe 上以运行您的应用程序。

示例 2 - 使用 NW.js API

所有 NW.js API 都全局加载到 nw 对象中，并且可以直接在 JavaScript 文件中使用。有关支持的 API 的完整列表，请参阅 API 参考。

此示例展示了如何在您的 NW.js 应用程序中创建本机上下文菜单。您可以使用以下内容创建 index.html

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu</title>
</head>
<body>

<p>'Right click' here to show context menu.</p>

<script>
// Create an empty context menu
var menu = new nw.Menu();

// Add some items with label
menu.append(new nw.MenuItem({
  label: 'Item A',
  click: function(){
    alert('You have clicked at "Item A"');
  }
}));
menu.append(new nw.MenuItem({ label: 'Item B' }));
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({ label: 'Item C' }));

// Hooks the "contextmenu" event
document.body.addEventListener('contextmenu', function(ev) {
  // Prevent showing default context menu
  ev.preventDefault();
  // Popup the native context menu at place you click
  menu.popup(ev.x, ev.y);

  return false;
}, false);

</script>  
</body>
</html>

…然后运行您的应用程序

cd /path/to/your/app
/path/to/nw .

require(‘nw.gui’)

使用 require('nw.gui') 加载 NW.js API 的传统方法也受支持。它返回相同的 nw 对象。

示例 3 - 使用 Node.js API

您可以直接从 DOM 调用 node.js 和模块。因此，它为使用 nw.js 编写应用程序提供了无限的可能性。

此示例展示了如何使用 Node.js 的 os 模块查询操作系统平台。只需创建包含以下内容的 index.html 文件，然后使用 NW.js 运行它。

<!DOCTYPE html>
<html>
<head>
  <title>My OS Platform</title>
</head>
<body>
<script>
// get the system platform using node.js
var os = require('os');
document.write('You are running on ', os.platform());
</script>
</body>
</html>

您还可以使用 npm 在 NW.js 中安装的模块。

原生 Node 模块

在运行 npm install 时构建的原生 Node 模块与 NW.js ABI 不兼容。要使用它们，您必须使用 nw-gyp 从源代码重新构建它们。有关详细信息，请参阅使用原生 Node 模块。

下一步

有关调试 NW.js 应用程序，请参阅使用 DevTools 调试。

请查看打包和分发以了解如何在生产环境中打包和重新分发您的应用程序。

请查看常见问题解答以了解您可能遇到的问题。

如果您要将应用程序从 NW.js 0.12 或更早版本迁移，请查看迁移说明。

获取帮助

NW.js wiki 上有很多有用的信息。Wiki 对所有人开放，我们鼓励您在 wiki 上发布您的知识。

您也可以在 Google 论坛邮件列表上提问，或在 Gitter 上聊天。

请在 GitHub 上报告错误或提交需求，以使 NW.js 更强大。